<div class="box box-default">
  <div class="box-body">

    <form class="form-inline">
      <div class="box box-default">
        <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-left:0px;margin-bottom:8px !important;">
          <button *ngIf="_.includes(menuResourceSet,'btn-QDII-ztms-flowInfo')" type="button" class="btn btn-primary" (click)="showFlowInfo()">
            <i class="fa fa-search"></i>查看流程信息
          </button>
          <button type="button" class="btn btn-primary" (click)="showSearchModal()">
            <i class="fa fa-search"></i>搜索
          </button>
          <button *ngIf="_.includes(menuResourceSet,'btn-QDII-ztms-save')" type="button" class="btn btn-primary" (click)="save()">
            <i class="fa fa-save"></i>保存</button>
          <button *ngIf="_.includes(menuResourceSet,'btn-QDII-ztms-commit')" type="button" class="btn btn-primary" (click)="commit()">
            <i class="fa fa-edit"></i>提交</button>
          <button *ngIf="_.includes(menuResourceSet,'btn-QDII-ztms-recall')" type="button" class="btn btn-primary" (click)="recall()">
            <i class="fa fa-undo"></i>撤销</button>
          <!-- <button type="button" class="btn btn-primary">
            <i class="iconfont icon-iconzhenghe62"></i>删除</button> -->
          <!-- <button type="button" class="btn btn-primary">
                  <i class="fa fa-sign-out"></i>导出</button> -->
          <button type="button" class="btn btn-box-tool pull-right" data-widget="collapse">
            <i class="fa fa-minus"></i>
          </button>
        </div>
        <div class="box-body">
          <div class="form-group col-lg-12" style="padding-left:0px !important;margin-bottom:8px;">
            <!-- <label class="control-label">指定是否有效：</label>
                <select class="form-control" [(ngModel)]="dataInfo.aa" name="aa">
                  <option [value]="0">有效</option>
                  <option [value]="1">无效</option>
                </select> -->

            <label class="control-label">条款出处：</label>
            <!-- <select class="form-control" style="min-width:182px" [(ngModel)]="dataInfo.sFileSource" name="sFileSource" (ngModelChange)="changeCheckedInfo('sFileSource')">
              <option [value]="''" selected="selected">--请选择--</option>
              <option [value]="item.sItemKey" *ngFor="let item of dictionaryList.NX_SOURCE">{{item.sItemValue}}</option>
            </select> -->
            <input class="form-control" placeholder="条款出处" [(ngModel)]="dataInfo.sFileSource" name="sFileSource">
            <button type="button" class="btn btn-primary" (click)="changeCheckedInfo('sFileSource')">确定</button>
            <label class="control-label">适用QDII类别：</label>
            <!-- <select style="width:150px;" class="form-control select2 fields-select" multiple="multiple" [(ngModel)]="dataInfo.sFundType"
              name="sFundType" (ngModelChange)="changeCheckedInfo('sFundType')">
              <option [value]="item.sItemValue" *ngFor="let item of dictionaryList.QD_ACCOUNT_TYPE">{{item.sItemValue}}</option>
            </select> -->
            <select [(ngModel)]="dataInfo.sFundType" name="sFundType" id="QDIIRouteFundType" (ngModelChange)="changeCheckedInfo('sFundType')"
              multiple></select>
            <label class="control-label">风控条目属性：</label>
            <select class="form-control" [(ngModel)]="dataInfo.sItemType" name="sItemType" (ngModelChange)="changeCheckedInfo('sItemType')">
              <option [value]="''" selected="selected">--请选择--</option>
              <option [value]="item.sItemKey" *ngFor="let item of dictionaryList.QDII_RECORD_TYPE">{{item.sItemValue}}</option>
            </select>

          </div>
          <div class="form-group col-lg-12" style="padding-left:0px !important;">
            <label class="control-label">文件名称：</label>
            <input class="form-control" placeholder="文件名称" maxlength="100" [(ngModel)]="dataInfo.sFileName" name="sFileName">
            <button type="button" class="btn btn-primary" (click)="changeCheckedInfo('sFileName')">确定</button>
            <label class="control-label">适用QDII名称：</label>
            <div class="input-group" (click)="showApplyQDIIName()">
              <input class="form-control" placeholder="适用QDII名称" [attr.title]="dataInfo.sFundGroupdsZh" [(ngModel)]="dataInfo.sFundGroupdsZh"
                name="sFundGroupdsZh" (ngModelChange)="changeCheckedInfo('sFundGroupdsZh')">
              <div class="input-group-addon" (click)="showApplyQDIIName()">
                <i class="fa fa-search"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>

    <div class="ibt-fixed-table-container">
      <!-- <div class="table-scroll-content"> -->
      <table id="route-table" class="table table-bordered table-hover table-striped table-keep-line" style="margin-top:unset !important;">
        <thead>
          <tr role="row">
            <th style="width:50px !important">
              <div class="cell">
                <div class="checkbox checkbox-primary">
                  <input type="checkbox" id="isCheckedAll" [(ngModel)]="isCheckedAll" name="isCheckedAll" (ngModelChange)="checkedAll()">
                  <label>
                  </label>
                </div>
              </div>
            </th>
            <th class="width-60">
              <div class="cell-padding">编号</div>
            </th>
            <th class="width-60">
              <div class="cell-padding">批次号</div>
            </th>
            <th class="width-120">
              <div class="cell-padding">当前流程</div>
            </th>
            <th class="width-120">
              <div class="cell-padding">处理状态</div>
            </th>
            <th class="width-120">
              <div class="cell-padding">是否有效</div>
            </th>
            <th class="width-120">
              <div class="cell-padding">条款出处</div>
            </th>
            <th class="width-120">
              <div class="cell-padding">文件名称</div>
            </th>

            <th class="width-120">
              <div class="cell-padding">属性</div>
            </th>

            <th class="width-180">
              <div class="cell-padding">适用QDII类别</div>
            </th>
            <th class="width-180">
              <div class="cell-padding">适用QDII名称</div>
            </th>
            <th class="width-120">
              <div class="cell-padding">内容</div>
            </th>
            <th class="width-120">
              <div class="cell-padding">指标释义</div>
            </th>
            <th class="width-180">
              <div class="cell-padding">bloomberg系统能否控制</div>
            </th>
            <th class="width-180">
              <div class="cell-padding">系统设置代码</div>
            </th>
            <th class="width-120">
              <div class="cell-padding">阀值</div>
            </th>
            <th class="width-180">
              <div class="cell-padding">人工控制方法说明</div>
            </th>
            <th class="width-180">
              <div class="cell-padding">系统实施相关条件</div>
            </th>
            <!-- <th>
                <div class="cell-padding">备注1</div>
              </th> -->
            <th class="width-120">
              <div class="cell-padding">备注2</div>
            </th>


          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of listData;let index = index;">
            <!-- <tr  > -->
            <td style="width:50px !important">
              <div class="cell" style="width:50px !important" id="routeCheck{{index}}">
                <div class="checkbox checkbox-primary">
                  <input type="checkbox" name="checkbox1" [(ngModel)]="item.isChecked" (ngModelChange)="ctrlCheckAll()">
                  <label>
                  </label>
                </div>
              </div>
            </td>
            <td class="width-60" [attr.title]="listData[index].nQjId">
              <div class="short_name">
                {{item.nQjId}}
              </div>
            </td>
            <td class="width-60" [attr.title]="listData[index].nBatchNo">
              <div class="short_name">
                {{item.nBatchNo}}
              </div>
            </td>
            <td class="width-120" [attr.title]="listData[index].sFlowStepZh">
              <div class="short_name">
                {{item.sFlowStepZh}}
              </div>
            </td>
            <td class="width-120" [attr.title]="listData[index].sOprStateZh">
              <div class="short_name">
                {{item.sOprStateZh}}
              </div>
            </td>
            <td class="width-120 font-color" id="sValidZh" [attr.title]="listData[index].sValidZh">
              <div class="short_name" id="sValidZh">
                {{item.sValidZh}}
              </div>
            </td>
            <td class="width-120 font-color" id="sFileSource" [attr.title]="listData[index].sFileSource" (click)="changeEleStatus(index,'sFileSource','1')">
              <div class="cell">
                <div id="sFileSource"></div>
                <div *ngIf="elementShow[index].sFileSource == ''">{{item.sFileSource}}</div>
                <input class="input-width" *ngIf="elementShow[index].sFileSource != ''" (blur)="changeEleStatus(index,'sFileSource','2')"
                  maxlength="2000" name="sFileSource" [(ngModel)]="listData[index].sFileSource" [disabled]="item.sFlowStep != '1'"
                  (ngModelChange)="inputChange(index,listData[index].sFileSource,'sFileSource')">
              </div>
            </td>
            <td class="width-120 font-color" id="sFileName" [attr.title]="listData[index].sFileName" (click)="changeEleStatus(index,'sFileName','1')">
              <div class="cell">
                <div id="sFileName"></div>
                <div *ngIf="elementShow[index].sFileName == ''">{{item.sFileName}}</div>
                <input class="input-width" *ngIf="elementShow[index].sFileName != ''" maxlength="100" name="sFileName" (blur)="changeEleStatus(index,'sFileName','2')" [(ngModel)]="listData[index].sFileName"
                  [disabled]="item.sFlowStep != '1'" (ngModelChange)="inputChange(index,listData[index].sFileName,'sFileName')">
              </div>
            </td>
            <td class="width-120 font-color" id="sItemType" [attr.title]="listData[index].sItemTypeZh" (click)="changeEleStatus(index,'sItemType','1')">
              <div class="cell">
                <div id="sItemType"></div>
                <div *ngIf="elementShow[index].sItemType == ''">{{item.sItemTypeZh}}</div>
                <select class="select-margin input-width" *ngIf="elementShow[index].sItemType != ''" name="sItemType" (blur)="changeEleStatus(index,'sItemType','2')" [(ngModel)]="listData[index].sItemType"
                  [disabled]="item.sFlowStep != '1'" (ngModelChange)="inputChange(index,listData[index].sItemType,'sItemType')">
                  <option [value]="''" selected="selected">--请选择--</option>
                  <option [value]="it.sItemKey" *ngFor="let it of dictionaryList.QDII_RECORD_TYPE">{{it.sItemValue}}</option>
                </select>
              </div>
            </td>
            <td class="width-180 font-color" id="sFundType" [attr.title]="listData[index].sFundType" (dblclick)="changeEleStatus(index,'sFundType','1')">
              <div class="cell">
                <div *ngIf="elementShow[index].sFundType == ''">{{item.sFundTypeZh}}</div>
                <select style="width:100px !important;" *ngIf="elementShow[index].sFundType != ''" class="select-margin input-width" (blur)="changeEleStatus(index,'sFundType','2')"
                  name="sFundType" [(ngModel)]="listData[index].sFundType" (ngModelChange)="inputChange(index,listData[index].sFundType,'sFundType')"
                  name="sFundType" id="QDIIRouteFundType{{index}}" multiple [disabled]="item.sFlowStep != '1'"></select>
              </div>
            </td>
            <td class="width-180 font-color" id="sFundGroupdsZh" [attr.title]="listData[index].sFundGroupdsZh" (click)="changeEleStatus(index,'sFundGroupdsZh','1')">
              <div *ngIf="elementShow[index].sFundGroupdsZh == ''">{{item.sFundGroupdsZh}}</div>
              <div class="input-group right_tooltip cell" *ngIf="elementShow[index].sFundGroupdsZh != ''">
                <input class="input-width" [(ngModel)]="listData[index].sFundGroupdsZh" (blur)="changeEleStatus(index,'sFundGroupdsZh','2')"
                  disabled name="sFundGroupdsZh" disabled (ngModelChange)="inputChange(index,listData[index].sFundGroupdsZh,'sFundGroupdsZh')">
                <div class="input-group-addon" (click)="showApplyQDIIName(index)" *ngIf="item.sFlowStep == '1'">
                  <i class="fa fa-search"></i>
                </div>
              </div>

            </td>

            <td class="width-120 font-color" id="f1" [attr.title]="listData[index].f1" (click)="changeEleStatus(index,'f1','1')">
              <div class="cell">
                <div id="f1"></div>
                <div *ngIf="elementShow[index].f1 == ''">{{item.f1}}</div>
                <input class="input-width" name="f1" *ngIf="elementShow[index].f1 != ''" maxlength="2000" [disabled]="item.sFlowStep != '1'" (blur)="changeEleStatus(index,'f1','2')"
                  [(ngModel)]="listData[index].f1" (ngModelChange)="inputChange(index,listData[index].f1,'f1')">
              </div>
            </td>
            <td class="width-120 font-color" id="f3" [attr.title]="listData[index].f3" (click)="changeEleStatus(index,'f3','1')">
              <div class="cell">
                <div id="f3"></div>
                <div *ngIf="elementShow[index].f3 == ''">{{item.f3}}</div>
                <input class="input-width" name="f3" *ngIf="elementShow[index].f3 != ''" maxlength="2000" [disabled]="item.sFlowStep != '1'" (blur)="changeEleStatus(index,'f3','2')"
                  [(ngModel)]="listData[index].f3" (ngModelChange)="inputChange(index,listData[index].f3,'f3')">
              </div>
            </td>
            <td class="width-180 font-color" id="f4" [attr.title]="listData[index].f4Zh" (click)="changeEleStatus(index,'f4','1')">
              <div class="cell width-180">
                <div id="f4"></div>
                <div *ngIf="elementShow[index].f4 == ''">{{item.f4}}</div>
                <select class="select-margin input-width " *ngIf="elementShow[index].f4 != ''" [(ngModel)]="listData[index].f4" name="f4" (blur)="changeEleStatus(index,'f4','2')"
                  (ngModelChange)="inputChange(index,listData[index].f4,'f4')" [disabled]="item.sFlowStep != '1'">
                  <option [value]="''" selected="selected">--请选择--</option>
                  <option [value]="it.sItemKey" *ngFor="let it of dictionaryList.RISK_BOOLMBERG_CONTROL">{{it.sItemValue}}</option>
                </select>
              </div>
            </td>
            <td class="width-180 font-color" id="f5" [attr.title]="listData[index].f5" (click)="changeEleStatus(index,'f5','1')">
              <div class="cell">
                <div id="f5"></div>
                <div *ngIf="elementShow[index].f5 == ''">{{item.f5}}</div>
                <input class="input-width" name="f5" *ngIf="elementShow[index].f5 != ''" maxlength="2000" [disabled]="item.sFlowStep != '1'" (blur)="changeEleStatus(index,'f5','2')"
                  [(ngModel)]="listData[index].f5" (ngModelChange)="inputChange(index,listData[index].f5,'f5')">
              </div>
            </td>
            <td class="width-120 font-color" id="f6" [attr.title]="listData[index].f6" (click)="changeEleStatus(index,'f6','1')">
              <div class="cell">
                <div id="f6"></div>
                <div *ngIf="elementShow[index].f6 == ''">{{item.f6}}</div>
                <input class="input-width" name="f6" *ngIf="elementShow[index].f6 != ''" maxlength="2000" [disabled]="item.sFlowStep != '1'" (blur)="changeEleStatus(index,'f6','2')"
                  [(ngModel)]="listData[index].f6" (ngModelChange)="inputChange(index,listData[index].f6,'f6')">
              </div>
            </td>
            <td class="width-180 font-color" id="f7" [attr.title]="listData[index].f7" (click)="changeEleStatus(index,'f7','1')">
              <div class="cell">

                <div id="f7"></div>
                <div *ngIf="elementShow[index].f7 == ''">{{item.f7}}</div>
                <input class="input-width" name="f7" *ngIf="elementShow[index].f7 != ''" maxlength="2000" [disabled]="item.sFlowStep != '1'" (blur)="changeEleStatus(index,'f7','2')"
                  [(ngModel)]="listData[index].f7" (ngModelChange)="inputChange(index,listData[index].f7,'f7')">
              </div>
            </td>
            <td class="width-180 font-color" id="f8" [attr.title]="listData[index].f8" (click)="changeEleStatus(index,'f8','1')">
              <div class="cell">
                <div id="f8"></div>
                <div *ngIf="elementShow[index].f8 == ''">{{item.f8}}</div>
                <input class="input-width" name="f8" *ngIf="elementShow[index].f8 != ''" maxlength="2000" [disabled]="item.sFlowStep != '1'" (blur)="changeEleStatus(index,'f8','2')"
                  [(ngModel)]="listData[index].f8" (ngModelChange)="inputChange(index,listData[index].f8,'f8')">
              </div>
            </td>
            <td class="width-120 font-color" id="f10" [attr.title]="listData[index].f10" (click)="changeEleStatus(index,'f10','10')">
              <div class="cell">
                <div id="f10"></div>
                <div *ngIf="elementShow[index].f10 == ''">{{item.f10}}</div>
                <input class="input-width" name="f10" *ngIf="elementShow[index].f10 != ''" maxlength="2000" [disabled]="item.sFlowStep != '1'" (blur)="changeEleStatus(index,'f10','2')"
                  [(ngModel)]="listData[index].f10" (ngModelChange)="inputChange(index,listData[index].f10,'f10')">
              </div>
            </td>
          </tr>
        </tbody>

      </table>
    </div>
    <div class="box-footer clearfix" style="width:100%;">
      <app-pagination [currentPageNum]="listPageInfo.currentPageNum" [pagesShow]="" [totalPages]="listPageInfo.totalPages" (pageChanged)="pageNavigation($event)">
        <div class="pull-left pagination-detail" data-pagination-additional="true">
          <span class="pagination-info">
            当前显示第{{listPageInfo.startRow}}到第{{listPageInfo.endRow}}条，总共{{listPageInfo.total}}条，
          </span>
          <span class="page-list">
            每页记录
            <span class="btn-group dropup">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span class="page-size">{{listPageInfo.pageSize}}</span>
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" role="menu">
                <li *ngFor="let i of listPageInfo.pageList" role="menuitem" [class.active]="listPageInfo.pageSize === i" (click)="sizeChange(i)">
                  <a>{{i}}</a>
                </li>
              </ul>
            </span>
            条
          </span>
        </div>
      </app-pagination>
    </div>
  </div>
</div>

<!-- 查看流程信息 -->
<div class="modal modal-detail" id="modal1">
  <div #flowInfo></div>
</div>

<!-- 搜索modal -->
<div class="modal modal-detail" id="search-modal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">搜索</h4>
      </div>
      <div class="modal-body">
        <form class="form-inline">
          <div class="box-body">
            <div class="form-group col-lg-12" style="padding-left:0px !important;margin-bottom:8px;">
              <label class="col-lg-2 text-right">发起日期:</label>
              <div class="col-lg-3">
                <div class="input-group date form_datetime">
                  <input class="form-control" type="text" [(ngModel)]="postBody.sOprDateStart" name="sOprDateStart" mwlFlatpickr style="background: white; cursor: pointer;">
                </div>
              </div>
              <label class="col-lg-2 text-right">到:</label>
              <div class="col-lg-3">
                <div class="input-group date form_datetime">
                  <input class="form-control" type="text" [(ngModel)]="postBody.sOprDateEnd" name="sOprDateEnd" mwlFlatpickr style="background: white; cursor: pointer;">
                </div>
              </div>
            </div>
            <div class="form-group col-lg-12" style="padding-left:0px !important;margin-bottom:8px;">
              <label class="col-lg-2 text-right">批次区间:</label>
              <div class="col-lg-3">
                <input class="form-control" [min]="0" type="text" maxlength="9" digits [(ngModel)]="postBody.nBatchNoStart" #nBatchNoStart="ngModel"
                  name="nBatchNoStart">
                <p *ngIf="nBatchNoStart.errors?.digits" class="errorTip">请输入正整数</p>
              </div>
              <label class="col-lg-2 text-right">到:</label>
              <div class="col-lg-3">
                <input class="form-control" [min]="0" type="text" maxlength="9" [(ngModel)]="postBody.nBatchNoEnd" #nBatchNoEnd="ngModel"
                  name="nBatchNoEnd">
                <p *ngIf="nBatchNoEnd.errors?.digits" class="errorTip">请输入正整数</p>
              </div>
            </div>
            <!-- <div class="form-group col-lg-12" style="padding-left:0px !important;margin-bottom:8px;">
              <label class="col-lg-2 text-right">发起人:</label>
              <div class="col-lg-3">
                <input class="form-control" [(ngModel)]="postBody.sBeginOperator" name="sBeginOperator">
              </div>
              <label class="col-lg-2 text-right">文件名称:</label>
              <div class="col-lg-3">
                <input class="form-control" [(ngModel)]="postBody.sFileName" name="sFileName">
              </div>
            </div>
            <div class="form-group col-lg-12" style="padding-left:0px !important;margin-bottom:8px;">
              <label class="col-lg-2 text-right">适用基金组:</label>
              <div class="col-lg-3">
                <input class="form-control" [(ngModel)]="postBody.sFundGroupds" name="sFundGroupds">
              </div>
              <label class="col-lg-2 text-right">适用基金类别:</label>
              <div class="col-lg-3">
                <input class="form-control" [(ngModel)]="postBody.sFundType" name="sFundType">
              </div>
            </div> -->
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
        <button type="submit" class="btn btn-primary pull-right" (click)="searchQuery()" [disabled]="nBatchNoStart.errors?.digits||nBatchNoEnd.errors?.digits">搜索</button>
      </div>
    </div>
  </div>
</div>

<!-- 保存并提交modal -->
<div class="modal modal-detail" id="routeSubmitModal">
  <div #routeSubmitModal></div>
</div>

<!-- 适用QDII名称modal -->
<div class="modal modal-detail" id="applyQDIIName1">
  <div #applyQDIIName1></div>
</div>

<!-- 查看流程信息 -->
<div class="modal modal-detail" id="flowInfo1">
  <div #flowInfo1></div>
</div>

<!-- 撤销modal -->
<div class="modal modal-detail" id="routeRevokeModal">
  <div #routeRevokeModal></div>
</div>